<script setup lang="ts">
  import { reactive, ref, watch } from 'vue';
  import {
    Card,
    Row,
    Col,
    Avatar,
    Image,
    Popover,
    Divider,
    List,
    ListItem,
  } from '@arco-design/web-vue';
  import type { HostpotPage } from '/@/api/model/pinsModel';
  import { queryHostPageList } from '/@/api/pins';
  import DOMPurify from 'dompurify';
  import { useGlobalScroll } from '/@/hooks/useScroll';
  import likeSvg from '/@/assets/pins/like.svg';
  import shareIcon from '/@/assets/pins/share.svg';
  import commentIcon from '/@/assets/pins/comment.svg';
  import { useRoute } from 'vue-router';

  const pinsListLoading = ref(false);
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 10 } });

  const route = useRoute();
  const user_id = ref<number>();

  watch(
    () => route.params.id,
    (id) => {
      user_id.value = parseInt(Array.isArray(id) ? id[0] : id, 10) ?? 0;
    },
    { immediate: true },
  );
  const pinsParams = reactive({
    page: 1,
    topic_id: '',
    community_id: '',
    user_id: user_id.value,
  });

  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (pinsListLoading.value) return;
        pinsParams.page++;
      }
    },
  );

  const pinsList = ref<HostpotPage[]>([]);
  watch(
    pinsParams,
    async () => {
      try {
        if (pinsListLoading.value) return;
        pinsListLoading.value = true;
        let res = await queryHostPageList({ ...pinsParams, size: 20 });
        res.list.map((item) => {
          item.content = DOMPurify.sanitize(item.content);
        });
        pinsList.value.push(...res.list);
        pinsListLoading.value = false;
      } catch (error) {}
    },
    { immediate: true },
  );
</script>

<template>
  <div class="w-full">
    <List :bordered="false">
      <a-card v-if="pinsListLoading">
        <a-skeleton animation>
          <a-space direction="vertical" :style="{ width: '100%' }" size="large">
            <a-skeleton-line :rows="4" />
          </a-space>
        </a-skeleton>
      </a-card>
      <ListItem v-for="item of pinsList" :key="item.id" class="p-[0]">
        <Card
          class="user-topic-card mb-[10px] rounded-[8px] bg-[rgba(255,255,255,0.8)]"
          :bordered="false"
        >
          <Row>
            <Col :span="1" class="mt-[2px]">
              <Avatar :size="45" :image-url="item.user_icon" />
            </Col>
            <Col :span="12" class="ml-[20px]">
              <div class="text-[18px] font-bold">{{ item.user_name }}</div>
              <div>
                <span class="text-[12px] text-[#909090]">{{ $timeAgo(item.createTime) }}</span>
              </div>
            </Col>
            <Col :span="9" class="text-right" v-if="item.star">
              <Avatar
                v-for="i of 4"
                :key="i"
                :style="{ 'z-index': i }"
                class="filter-shadow ml-[-8px] bg-transparent"
                :size="20"
                :image-url="item.user_icon"
              />
              <span class="font-[400] text-[rgba(0,0,0,0.5)] ml-4">等人赞过</span>
            </Col>
          </Row>
          <Row class="overflow-auto mb-2 pt-[20px]">
            <Col :span="1" />
            <Col
              :span="23"
              class="text-[16px] ml-[55px] py-[10px] box-border rounded-[8px] relative"
            >
              <!-- <img :src="triangleImg" class="absolute w-[34px] left-[17px] top-[-18px]" /> -->
              <TalkContainer>
                <div
                  v-html="item.content"
                  class="w-full text-[rgba(0,0,0,0.8) font-[500] text-[14px]"
                ></div>
              </TalkContainer>
              <div v-if="item.img?.length < 5" class="w-full max-h-[350px] overflow-hidden">
                <Image
                  v-for="(img, i) of item?.img"
                  :key="i"
                  class="w-[200px] h-[200px] rounded-[4px] pt-[6px] pr-[6px] box-border"
                  :src="img"
                />
              </div>
              <div v-else class="w-full max-h-[350px] overflow-hidden">
                <Image
                  v-for="(img, index) of item?.img"
                  :key="index"
                  class="w-[110px] h-[110px] pt-[6px] pr-[6px] box-border"
                  :src="img"
                />
              </div>
            </Col>
          </Row>
          <Divider />
          <Row class="cursor-pointer flex justify-end">
            <Col
              :span="2"
              class="text-center flex items-center justify-center text-[rgba(0,0,0,0.5)]"
            >
              <img :src="likeSvg" class="w-[16px] h-[16px] mr-[4px]" />
              点赞
            </Col>
            <Col
              :span="2"
              class="text-center flex items-center justify-center text-[rgba(0,0,0,0.5)]"
            >
              <img :src="commentIcon" class="w-[16px] h-[16px] mr-[4px]" />
              评论
            </Col>
            <Popover title="" trigger="click" position="bottom" content-class="emoji-content">
              <template #content>
                <div class="w-132px">
                  <Row>
                    <Col class="flex items-center"> <IconShareAlt class="mr-2" /> 复制链接1</Col>
                  </Row>
                  <Divider />
                  <Row>
                    <Col class="flex items-center"> <IconShareAlt class="mr-2" /> 复制链接2</Col>
                  </Row>
                  <Divider />
                  <Row>
                    <Col class="flex items-center"> <IconShareAlt class="mr-2" /> 复制链接3</Col>
                  </Row>
                </div>
              </template>
              <Col
                :span="2"
                class="text-center flex items-center justify-center text-[rgba(0,0,0,0.5)]"
              >
                <img :src="shareIcon" class="w-[16px] h-[16px] mr-[4px]" />
                转发
              </Col>
            </Popover>
          </Row>
        </Card>
      </ListItem>
    </List>
  </div>
</template>
<style scoped>
  .center-card :deep(.arco-card-header) {
    border: none;
    height: 74px;
  }

  .center-card :deep(.arco-card-header-title) {
    font-size: 20px;
    font-weight: bold;
  }
</style>

<style scoped>
  .type-card >>> .arco-tabs-content {
    padding: 0 !important;
  }

  .type-card >>> .arco-tabs-nav::before {
    display: none !important;
  }

  .filter-shadow {
    filter: drop-shadow(-2px 0px 4px rgba(0, 0, 0, 0.25));
  }
</style>
